<template>
  <div class="EmergencyList">
    <div class="flex location-wrap">
        <span class="white">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/EDManagement' }">应急处置</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/ResourceAllocation' }">资源调配</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/ResourceStatisticsList' }">资源投入统计</el-breadcrumb-item>
        <el-breadcrumb-item>物资信息明细</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="box">
      <div style="height:50px">
        <el-row style="float:right;margin:auto">
          <el-button size="small" @click="AddFh">返回</el-button>
        </el-row>
      </div>
      <LsdTable :paginationAtrrs="paginationAtrrs" :compRef="table.compRef" :columns="table.columns" :title="table.title" :actions="table.actions" :tableData="table.tableData" :tableAttr="table.tableAttr" :isShowPage="table.isShowPage" :nobtnHeight="table.nobtnHeight" :isSequenceFlag="table.isSequenceFlag" @onActionClick="onActionClick" />
    </div>
  </div>
</template>

<script>
// import { JGTeamDetail, QXTeamDetail, CarDetail, EquipmentDetail, MaterialDetail } from "./StatisticsList.js"

export default {
  name: "EmergencyList",
  components: {},
  data() {
    return {
      table: {
        compRef: "zysq",
        isSequenceFlag: true,
        nobtnHeight: true,
        isShowPage: true,
        resetFlag: true,
        loading: false,
        title: "资源投入统计列表",
        tableData: [
          {
            bumen: "国网随州供电公司",
            bumen1: "国网随县供电公司",
            wzdl: "装置性材料",
            wzzl: "导、地线",
            wzxl: "架空绝缘导线",
            dw: "米",
            num: "3000",
            person: "刘志豪",
            tel: "13525342541",
            state: "已检合格",
            date: "2021年8月",
            week: "六个月"
          },
          {
            bumen: "国网随州供电公司",
            bumen1: "国网随县供电公司",
            wzdl: "装置性材料",
            wzzl: "导、地线",
            wzxl: "架空绝缘导线",
            dw: "米",
            num: "3000",
            person: "刘志豪",
            tel: "13525342541",
            state: "已检合格",
            date: "2021年8月",
            week: "六个月"
          },
          {
            bumen: "国网随州供电公司",
            bumen1: "国网随县供电公司",
            wzdl: "装置性材料",
            wzzl: "导、地线",
            wzxl: "架空绝缘导线",
            dw: "米",
            num: "3000",
            person: "刘志豪",
            tel: "13525342541",
            state: "已检合格",
            date: "2021年8月",
            week: "六个月"
          },
          {
            bumen: "国网随州供电公司",
            bumen1: "国网随县供电公司",
            wzdl: "装置性材料",
            wzzl: "导、地线",
            wzxl: "架空绝缘导线",
            dw: "米",
            num: "3000",
            person: "刘志豪",
            tel: "13525342541",
            state: "已检合格",
            date: "2021年8月",
            week: "六个月"
          },
          {
            bumen: "国网随州供电公司",
            bumen1: "国网随县供电公司",
            wzdl: "装置性材料",
            wzzl: "导、地线",
            wzxl: "架空绝缘导线",
            dw: "米",
            num: "3000",
            person: "刘志豪",
            tel: "13525342541",
            state: "已检合格",
            date: "2021年8月",
            week: "六个月"
          },
          {
            bumen: "国网随州供电公司",
            bumen1: "国网随县供电公司",
            wzdl: "装置性材料",
            wzzl: "导、地线",
            wzxl: "架空绝缘导线",
            dw: "米",
            num: "3000",
            person: "刘志豪",
            tel: "13525342541",
            state: "已检合格",
            date: "2021年8月",
            week: "六个月"
          },
          {
            bumen: "国网随州供电公司",
            bumen1: "国网随县供电公司",
            wzdl: "装置性材料",
            wzzl: "导、地线",
            wzxl: "架空绝缘导线",
            dw: "米",
            num: "3000",
            person: "刘志豪",
            tel: "13525342541",
            state: "已检合格",
            date: "2021年8月",
            week: "六个月"
          },
          {
            bumen: "国网随州供电公司",
            bumen1: "国网随县供电公司",
            wzdl: "装置性材料",
            wzzl: "导、地线",
            wzxl: "架空绝缘导线",
            dw: "米",
            num: "3000",
            person: "刘志豪",
            tel: "13525342541",
            state: "已检合格",
            date: "2021年8月",
            week: "六个月"
          }
        ],
        columns: [
          {
            prop: "bumen",
            label: "响应命令单",
            align: "center",
            "min-width": "230px",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span
                      style='color:#3561fd;cursor:pointer;text-decoration: underline;'
                      {...{
                        on: {
                          click: () => {
                            this.detailList(row);
                          }
                        }
                      }}
                    >
                      {row.bumen}
                    </span>
                  }
                </div>
              );
            }
          },
          {
            prop: "bumen1",
            label: "事件类别",
            align: "center"
          },
          {
            prop: "responseLvName",
            label: "事件级别",
            align: "center"
          },
          {
            prop: "effectRange",
            label: "影响范围",
            align: "center"
          },
          {
            prop: "effectTime",
            label: "影响时间",
            align: "center",
            "min-width": "120px"
          },
          {
            prop: "resourceApplyOrderName",
            label: "资源申请单",
            align: "center",
            "min-width": "200px",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span
                      style='color:#3561fd;cursor:pointer;text-decoration: underline;'
                      {...{
                        on: {
                          click: () => {
                            this.detailList(row);
                          }
                        }
                      }}
                    >
                      {row.emergencyEvent}
                    </span>
                  }
                </div>
              );
            }
          },
          {
            prop: "resourceTypeName",
            label: "资源类型",
            align: "center",
            "min-width": "120px"
          },
          {
            prop: "acceptUnit",
            label: "受理单位及部门",
            align: "center",
            "min-width": "120px"
          },
          {
            prop: "applyUnit",
            label: "申请单位",
            align: "center",
            "min-width": "120px"
          },
          {
            prop: "applyTime",
            label: "申请时间",
            align: "center",
            "min-width": "120px"
          },
          {
            prop: "levelName",
            label: "需求等级",
            align: "center",
            "min-width": "120px"
          },
          {
            prop: "orderStatusName",
            label: "状态",
            align: "center",
            "min-width": "100px",
            formatter: (row, column, cellValue, index) => {
              if (cellValue === "0") {
                return "编辑";
              } else if (cellValue === "1") {
                return "待审批";
              } else if (cellValue === "2") {
                return "待派遣";
              } else {
                return "已到达";
              }
            }
          },
          {
            prop: "cz",
            label: "操作",
            align: "center",
            fixed: "right",
            "min-width": "120px",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span
                      style='color:#3561fd;cursor:pointer;text-decoration: underline;margin:0 10px'
                      {...{
                        on: {
                          click: () => {
                            this.writeReport(row);
                          }
                        }
                      }}
                    >
                      编辑中
                    </span>
                  }
                  {
                    <span
                      style='color:#3561fd;cursor:pointer;text-decoration: underline;margin:0 10px 0 0'
                      {...{
                        on: {
                          click: () => {
                            this.writeReport(row);
                          }
                        }
                      }}
                    >
                      删除
                    </span>
                  }
                </div>
              );
            }
          }
        ],
        tableAttr: {
          "max-height": "560px",
          height: "560px",
          stripe: false,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": true,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            "font-size": "16px"
          }
        }
      },
      paginationAtrrs: {
        total: 0,
        layout: "total, sizes, prev, pager, next, jumper",
        "current-page": 1,
        "page-size": 10,
        "page-sizes": [10, 20, 30, 40, 50, 100]
      }
    };
  },
  mounted(val) {
    // if (val === 1) {
    //   JGTeamDetail, QXTeamDetail, CarDetail, EquipmentDetail, MaterialDetail
    // }
  },
  methods: {
    onActionClick(item, index) {
      console.log(item);
      this[item.id](); // 调用按钮对应方法
    },
    // 返回上一级
    AddFh() {
      this.$router.go(-1);
    }
  }
};
</script>

<style scoped lang="less">
@import "../../../../assets/style/ComponentStyle.less";
:deep(.el-breadcrumb__inner.is-link) {
  font-weight: 100;
  color: #fff;
}
.EmergencyList :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
  color: #3270ff;
}
.EmergencyList {
  height: 100%;
}
.box {
  margin-top: 20px;
  background-color: #fff;
  border-radius: 4px;
  padding: 10px;
  box-sizing: border-box;
  height: 100%;
}
</style>
